<template>
    <div>
        <table-search @search="search(1)" :isExtra="false" @reset="reset()">
            <template slot="form">
                <form-item label="">
                    <a-tree-select v-model="form.deptName" allowClear style="width:240px"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="deptList" :replaceFields="{
                            children: 'children',
                            title: 'deptName',
                            key: 'deptId',
                            value: 'deptName'
                        }" placeholder="请选择部门">
                    </a-tree-select>
                </form-item>
                <form-item label="">
                    <a-range-picker v-model="form.date">
                    </a-range-picker>
                </form-item>
            </template>
        </table-search>
        <table-list :loading="loading" :columns="columns" rowKey="id" :pagination="pagination" :data="list">
            <template slot="status" slot-scope="{ text }">
                <field-tag :value="text" v-if="text" type="value" showType="name" :data="workOrderStatus"></field-tag>
            </template>
        </table-list>
    </div>
</template>
<script>
import table from '@/mixins/table';
const moment = require('moment');
import { columns } from './list'
import { remoteListInfo } from '@/api/operation/workorder'

export default {
    name: 'TotalInfo',
    mixins: [table],
    props: {
        info: {
            type: Object,
            default: () => { }
        },
        deptList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        let originForm = {
            deptName: undefined,
            date: [],
        }
        return {
            columns,
            originForm,
            form: {
                ...originForm
            }
        }
    },
    watch: {
        'form.date': function (e) {
            if (e && e.length) {
                let fromDate = moment(e[0]).format("YYYY/MM/DD");
                let toDate = moment(e[1]).format("YYYY/MM/DD");
                this.form.fromDate = fromDate;
                this.form.toDate = toDate;
            } else {
                delete this.form.fromDate;
                delete this.form.toDate;
            }
        }
    },
    created() {
        this.search()
    },
    methods: {
        async search(page) {
            try {
                this.loading = true;
                if (page) {
                    this.form.page = page;
                }
                let form = { ...this.form }
                delete form.date;
                this.list = [];
                let res = await remoteListInfo(form);
                let { list, total } = res.data;
                this.list = list;
                this.total = total;
            } finally {
                this.loading = false;
            }
        }
    }
}
</script>